{% extends 'base.html' %}

{% block title %}添加用户{% endblock %}

{% block page_title %}添加用户{% endblock %}

{% block breadcrumb_active %}用户管理 / 添加用户{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">添加新用户</h3>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
                <form method="post">
                    {% csrf_token %}
                    
                    {% if form.errors %}
                        <div class="alert alert-danger alert-dismissible">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                            <h5><i class="icon fas fa-ban"></i> 错误！</h5>
                            {% for field in form %}
                                {% for error in field.errors %}
                                    <p>{{ field.label }}: {{ error }}</p>
                                {% endfor %}
                            {% endfor %}
                            {% for error in form.non_field_errors %}
                                <p>{{ error }}</p>
                            {% endfor %}
                        </div>
                    {% endif %}
                    
                    <!-- 使用表格作为表单结构 -->
                    <table class="table table-borderless" style="margin-bottom: 0;">
                        <tbody style="line-height: 1.2;">
                            <!-- 第一行 -->
                            <tr style="height: 60px;">
                                <td style="width: 30%; padding: 5px;">
                                    <div class="form-group mb-2">
                                        <label for="id_username" class="col-form-label-sm mb-1">{{ form.username.label }} <span class="text-danger">*</span></label>
                                        {{ form.username }}
                                    </div>
                                </td>
                                <td style="width: 30%; padding: 5px;">
                                    <div class="form-group mb-2">
                                        <label for="id_email" class="col-form-label-sm mb-1">{{ form.email.label }}</label>
                                        {{ form.email }}
                                    </div>
                                </td>
                                <td style="width: 40%; padding: 5px;"></td>
                            </tr>
                            
                            <!-- 第二行 -->
                            <tr style="height: 60px;">
                                <td style="padding: 5px;">
                                    <div class="form-group mb-2">
                                        <label for="id_first_name" class="col-form-label-sm mb-1">{{ form.first_name.label }}</label>
                                        {{ form.first_name }}
                                    </div>
                                </td>
                                <td style="padding: 5px;">
                                    <div class="form-group mb-2">
                                        <label for="id_last_name" class="col-form-label-sm mb-1">{{ form.last_name.label }}</label>
                                        {{ form.last_name }}
                                    </div>
                                </td>
                                <td style="padding: 5px;"></td>
                            </tr>
                            
                            <!-- 第三行 -->
                            <tr style="height: 60px;">
                                <td style="padding: 5px;">
                                    <div class="form-group mb-2">
                                        <label for="id_password" class="col-form-label-sm mb-1">{{ form.password.label }}</label>
                                        {{ form.password }}
                                        <small class="form-text text-muted">留空则不设置密码</small>
                                    </div>
                                </td>
                                <td style="padding: 5px;">
                                    <div class="form-group mb-2">
                                        <label for="id_confirm_password" class="col-form-label-sm mb-1">{{ form.confirm_password.label }}</label>
                                        {{ form.confirm_password }}
                                    </div>
                                </td>
                                <td style="padding: 5px;"></td>
                            </tr>
                            
                            <!-- 第四行 - 复选框 -->
                            <tr style="height: 40px;">
                                <td colspan="3" style="padding: 5px;">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <div class="form-group mb-0">
                                                <div class="checkbox">
                                                    <label>
                                                        {{ form.is_active }}
                                                        {{ form.is_active.label }}
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group mb-0">
                                                <div class="checkbox">
                                                    <label>
                                                        {{ form.is_staff }}
                                                        {{ form.is_staff.label }}
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group mb-0">
                                                <div class="checkbox">
                                                    <label>
                                                        {{ form.is_superuser }}
                                                        {{ form.is_superuser.label }}
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            
                            <!-- 用户组 -->
                            <tr>
                                <td colspan="3" style="padding: 5px;">
                                    <div class="form-group mb-0">
                                        <label class="col-form-label-sm mb-1">{{ form.groups.label }}</label>
                                        <div class="ml-2" style="max-height: 100px; overflow-y: auto;">
                                            {{ form.groups }}
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    
                    <div class="card-footer">
                        <button type="submit" class="btn btn-primary">保存</button>
                        <a href="{% url 'user_list' %}" class="btn btn-default">取消</a>
                    </div>
                </form>
            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.card -->
    </div>
    <!-- /.col -->
</div>
<!-- /.row -->
{% endblock %}

{% block extra_js %}
<script>
    $(function() {
        // 确保所有表单元素都有正确的AdminLTE样式
        $('input[type="text"], input[type="email"], input[type="password"], select, textarea').addClass('form-control');
    });
</script>
{% endblock %}